<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <el-main>
      <div class="allmsg">
        <div class="leftmsg">
          <div
            style="
              text-align: left;
              margin-left: 60px;
              font-size: 25px;
              margin-top: 30px;
            "
          >
            <b> 我的购物袋 </b>
          </div>
          <div
            v-for="(goods, index) in goodslist"
            :key="index"
            class="1"
            style="
              margin-left: 70px;
              height: 300px;
              width: 700px;
              margin-top: 30px;
              background-color: whitesmoke;
            "
          >
            <div
              style="
                  margin-left: 30px;
                  margin-top:50px
                  width: 150px;
                  height: 150px;
                  float: left;
                  flex: 1;
                "
            >
              <el-image
                style="margin-top: 25px; width: 150px; height: 150px"
                :src="goods.image"
              ></el-image>
            </div>
            <div
              style="
                font-size: 18px;
                float: left;
                margin-top: 50px;
                margin-left: 30px;
              "
            >
              <b>{{ goods.name }}</b>
            </div>
            <div>
              <el-input-number
              placeholder="0"
                v-model="goods.count"
                controls-position="right"
                :min="0"
                :max="goods.stock"
                style="width: 100px; margin-top: 40px; margin-left: 50px"
              ></el-input-number>
            </div>
            <div
              style="
                float: left;
                margin-left: 30px;
                margin-top: 30px;
                font-size: 20px;
              "
            >
              单价：{{ goods.price }}
            </div>
            <div
              style="
                float: left;
                margin-left: -85px;
                margin-top: 90px;
                font-size: 20px;
              "
            >
              库存：{{ goods.stock }}
            </div>
            <div
              style="
                margin-top: 100px;
                width: 60px;
                height: 60px;
                float: left;
                margin-left: 220px;
              "
            >
              <el-button
                icon="el-icon-delete"
                style="width: 100%; height: 100%"
                @click="deleteGood(goods, index)"
              ></el-button>
            </div>
          </div>
          <div
            style="
              width: 700px;
              background-color: whitesmoke;
              margin-left: 70px;
              margin-top: 30px;
              height: 100px;
            "
          >
            <div
              style="
                font-size: 20px;
                float: left;
                padding-top: 30px;
                padding-left: 30px;
              "
            >
              总金额：
            </div>
            <div
              style="
                font-size: 20px;
                float: right;
                padding-top: 30px;
                padding-right: 50px;
              "
            >
              ￥{{ getTotalPrice() }}
            </div>
          </div>
          <div
            style="
              width: 200px;
              height: 60px;
              float: right;
              margin-right: 200px;
              margin-top: 30px;
            "
          >
            <el-button
              style="width: 100%; height: 100%"
              type="primary"
              @click="check"
              >确认购买</el-button
            >
          </div>
        </div>
        <div class="rightmsg">
          <div style="font-size: 22px; margin-left: 50px">
            <b>客户服务中心</b>
          </div>
          <br />
          <div style="font-size: 18px; margin-left: 50px">
            <label class="el-icon-phone-outline"
              >&nbsp;&nbsp;联系电话：000 000 0000</label
            >
          </div>
          <br />
          <div style="font-size: 18px; margin-left: 50px">
            <label class="el-icon-message"
              >&nbsp;&nbsp;通过e-mail联系我们</label
            >
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/Header.vue";
import { deleteByUG } from "@/api/cart.js";
import { getItem } from "@/utils/localStorage.js";
import { randomNumber } from "@/utils/myNumber.js";
import { getByUser } from "@/api/address.js";
import {addOrderGoods} from "@/api/orderGoods.js"
import {addOrder} from "@/api/order.js"
export default {
  components: { Header },
  data() {
    return {
      goodslist: [],
      orderGoods: [],
      totalPrice: "",
    };
  },
  created() {
    this.goodslist = this.$route.query.goodslist;
  },
  methods: {
    getTotalPrice() {
      let totalprice = 0;
      this.goodslist.forEach((ele) => {
        if (ele.count != undefined) {
          totalprice += Number.parseInt(ele.price) * Number.parseInt(ele.count);
        }
      });
      this.totalPrice = totalprice;
      return totalprice;
    },
    deleteGood(goods, index) {
      this.$confirm("确定删除该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.goodslist.splice(index, 1);
          let id = getItem("id");
          deleteByUG(id, goods.id).then((res) => {
            if (res.data.code == "0000") {
              console.log("删除成功");
            } else {
              console.log("出错了");
            }
          });
        })
        .catch(() => {});
    },
    check() {
      getByUser(getItem("id")).then((res) => {
        if (res.data.code == "0000") {
          if (res.data.data == null) {
            this.$message.error("请完善地址");
            return false;
          } else {
            let orderId=randomNumber()
            this.goodslist.forEach((ele) => {
              if (ele.count != undefined) {
                let ordergood = { orderId:orderId,goodsId: ele.id, count: ele.count };
                this.orderGoods.push(ordergood);
              }
            });
            console.log(this.orderGoods)
            addOrderGoods(this.orderGoods).then(res=>{
              if(res.data.code=="0000"){
                console.log("订单-商品添加成功")
              }else{
                console.log("订单-商品添加失败")
              }
            })
            let order={orderId:orderId,userId:getItem("id"),price:this.totalPrice,status:0}
            addOrder(order).then(res=>{
              if(res.data.code=="0000"){
                console.log("订单添加成功")
              }else{
                console.log("订单添加失败")
              }
            })
            this.$confirm(
              "总金额是￥" + this.totalPrice + ",是否进行付款",
              "付款",
              {
                confirmButtonText: "去付款",
                cancelButtonText: "再等等",
                type: "info",
              }
            )
              .then(() => {
                this.$router.push("/myaddress")
              })
              .catch(() => {
                this.$router.push("/myaddress")
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" >
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head > div {
  float: left;
}
.head img {
  float: left;
  padding: 0;
  margin: 0;
}
.allmsg {
  display: flex;
  height: 1000px;
}
.leftmsg {
  flex: 2;
  margin-left: 30px;
  width: 600px;
  float: left;
  margin-top: 50px;
  height: 100%;
  background: white;
}
.rightmsg {
  flex: 1;
  text-align: left;
  float: left;
  margin-top: 120px;
  height: 500px;
  background: white;
}
</style>
